<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>编辑信息</span>
          </div>
          <div class="text item">
              <div id="main"  :style="{width:'600px',height:'400px'}"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>效果显示</span>
            </div>
            <div class="text item">
              <div id="main1"  :style="{width:'600px',height:'400px'}"></div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created () {

  },
  mounted () {
    let option =
    {
      title: { text: '在Vue中使用echarts' },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
    let myChart = this.$echarts.init(document.querySelector('#main'))
    let myChart1 = this.$echarts.init(document.querySelector('#main1'))
    myChart.setOption(option)
    myChart1.setOption(option)
  },
  methods: {
  }
}
</script>
